$(function () {
    $('.sidebar-nav').find('.sidebar-nav-link').click(function () {
        var index = $(this).index() - 1;
        sessionStorage.sidebarNavLink = index;
    });
    //     // 判断用户是否已有自己选择的模板风格
    //    if(storageLoad('SelcetColor')){
    //      $('body').attr('class',storageLoad('SelcetColor').Color)
    //    }else{
    //        storageSave(saveSelectColor);
    //        $('body').attr('class','theme-black')
    //    }
    autoLeftNav();
    $(window).resize(function () {
        autoLeftNav();
        console.log($(window).width())
    });

    //    if(storageLoad('SelcetColor')){

    //     }else{
    //       storageSave(saveSelectColor);
    //     }
    //更新提醒信息
    $.post('calendarClock', {}, function (data) {
        var html = [];
        $('#calendarClock').prev().children().last().text(data.length);
        for (i in data) {
            var json = JSON.parse(data[i]);
            html.push('<li class="tpl-dropdown-menu-notifications">' +
                '<a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">' +
                '<div class="tpl-dropdown-menu-notifications-title">' +
                '<i class="am-icon-folder-o"></i>' +
                '<span> ' + json.title + '</span>' +
                '</div>' +
                '<div class="tpl-dropdown-menu-notifications-time">' +
                parseInt((json.start - new Date().getTime()) / 1000 / 60 / 60 / 24) + '天后' +
                '</div> </a></li>');
        }
        html.push('<li class="tpl-dropdown-menu-notifications">' +
            '<a href="calendar" class="tpl-dropdown-menu-notifications-item am-cf">' +
            '<i class="am-icon-bell"></i> 进入列表… </a> </li>');
        $('#calendarClock').html(html.join(''))
    });
    //绘制clock
    // inner variables
    var canvas = document.getElementById("clock");
    var ctx = canvas.getContext("2d");
    var clockRadius = 41;
    var clockImage;

// draw functions :
    function clear() { // clear canvas function
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }

    function drawScene() { // main drawScene function
        clear(); // clear canvas

        // get current time
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        hours = hours > 12 ? hours - 12 : hours;
        var hour = hours + minutes / 60;
        var minute = minutes + seconds / 60;

        // save current context
        ctx.save();

        // draw clock image (as background)
        ctx.drawImage(clockImage, 0, 0, 82, 82);

        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.beginPath();

        // draw numbers
        ctx.font = '10px Arial';
        ctx.fillStyle = '#000';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        for (var n = 1; n <= 12; n++) {
            var theta = (n - 3) * (Math.PI * 2) / 12;
            var x = clockRadius * 0.7 * Math.cos(theta);
            var y = clockRadius * 0.7 * Math.sin(theta);
            ctx.fillText(n, x, y);
        }

        // draw hour
        ctx.save();
        var theta = (hour - 3) * 2 * Math.PI / 12;
        ctx.rotate(theta);
        ctx.beginPath();
        ctx.moveTo(-15, -5);
        ctx.lineTo(-15, 5);
        ctx.lineTo(clockRadius * 0.5, 1);
        ctx.lineTo(clockRadius * 0.5, -1);
        ctx.fill();
        ctx.restore();

        // draw minute
        ctx.save();
        var theta = (minute - 15) * 2 * Math.PI / 60;
        ctx.rotate(theta);
        ctx.beginPath();
        ctx.moveTo(-15, -4);
        ctx.lineTo(-15, 4);
        ctx.lineTo(clockRadius * 0.8, 1);
        ctx.lineTo(clockRadius * 0.8, -1);
        ctx.fill();
        ctx.restore();

        // draw second
        ctx.save();
        var theta = (seconds - 15) * 2 * Math.PI / 60;
        ctx.rotate(theta);
        ctx.beginPath();
        ctx.moveTo(-15, -3);
        ctx.lineTo(-15, 3);
        ctx.lineTo(clockRadius * 0.9, 1);
        ctx.lineTo(clockRadius * 0.9, -1);
        ctx.fillStyle = '#0f0';
        ctx.fill();
        ctx.restore();

        ctx.restore();
    }

// initialization
    // var width = canvas.width;
    // var height = canvas.height;

    clockImage = new Image();
    clockImage.src = 'http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png';

    setInterval(drawScene, 1000); // loop drawScene




});




// 风格切换

$('.tpl-skiner-toggle').on('click', function () {
    $('.tpl-skiner').toggleClass('active');
});

$('.tpl-skiner-content-bar').find('span').on('click', function () {
    $('body').attr('class', $(this).attr('data-color'));
    saveSelectColor.Color = $(this).attr('data-color');
    // 保存选择项
    storageSave(saveSelectColor);

});


// 侧边菜单开关


function autoLeftNav() {


    $('.tpl-header-switch-button').on('click', function () {
        if ($('.left-sidebar').is('.active')) {
            if ($(window).width() > 1024) {
                $('.tpl-content-wrapper').removeClass('active');
            }
            $('.left-sidebar').removeClass('active');
        } else {

            $('.left-sidebar').addClass('active');
            if ($(window).width() > 1024) {
                $('.tpl-content-wrapper').addClass('active');
            }
        }
    });

    if ($(window).width() < 1024) {
        $('.left-sidebar').addClass('active');
    } else {
        $('.left-sidebar').removeClass('active');
    }
}


// 侧边菜单
$('.sidebar-nav-sub-title').on('click', function () {
    $(this).siblings('.sidebar-nav-sub').slideToggle(80)
        .end()
        .find('.sidebar-nav-sub-ico').toggleClass('sidebar-nav-sub-ico-rotate');
});